<template>
  <div class="coupon-verify">
    <!-- 页面标题 -->
    <!-- <div class="page-header">
      <h2>优惠券验证</h2>
      <p>验证优惠券是否可以核销，支持单个验证、批量验证和扫码验证</p>
    </div> -->


    <!-- 验证方式选择 -->
    <el-card class="verify-card">
      <div slot="header">
        <el-radio-group v-model="verifyMode" @change="handleModeChange">
          <el-radio label="single">单个验证</el-radio>
          <el-radio label="batch">批量验证</el-radio>
          <el-radio label="scan">扫码验证</el-radio>
        </el-radio-group>
      </div>

      <!-- 单个验证 -->
      <div v-if="verifyMode === 'single'" class="verify-content">
        <el-form :model="singleForm" ref="singleForm" :rules="singleRules" label-width="120px">
          <el-form-item label="优惠券代码" prop="coupon_code">
            <el-input
              v-model="singleForm.coupon_code"
              placeholder="请输入优惠券代码"
              style="width: 400px;"
              @keyup.enter.native="verifySingle"
            ></el-input>
          </el-form-item>
          <el-form-item label="商户" prop="merchant_id">
            <el-select
              v-model="singleForm.merchant_id"
              placeholder="请选择商户"
              style="width: 300px;"
              filterable
              :loading="merchantLoading"
            >
              <el-option
                v-for="merchant in merchantList"
                :key="merchant.id"
                :label="merchant.merchant_name"
                :value="merchant.id"
              >
                <span style="float: left">{{ merchant.merchant_name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ merchant.contacts }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="verifySingle" :loading="singleLoading">验证优惠券</el-button>
            <el-button @click="resetSingleForm">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 单个验证结果 -->
        <div v-if="singleResult" class="result-section">
          <h3>验证结果</h3>
          <el-alert
            :title="singleResult.message"
            :type="singleResult.can_consume ? 'success' : 'error'"
            show-icon
            :closable="false"
          />
          
          <div v-if="singleResult.coupon" class="coupon-detail">
            <h4>优惠券详情</h4>
            <el-descriptions border :column="2">
              <el-descriptions-item label="优惠券代码">{{ singleResult.coupon.coupon_code }}</el-descriptions-item>
              <el-descriptions-item label="优惠券名称">{{ singleResult.coupon.coupon_name }}</el-descriptions-item>
              <el-descriptions-item label="描述">{{ singleResult.coupon.description }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="singleResult.coupon.is_consumed ? 'danger' : 'success'">
                  {{ singleResult.coupon.is_consumed ? '已消费' : '可使用' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ singleResult.coupon.create_time }}</el-descriptions-item>
              <el-descriptions-item label="商户">{{ singleResult.merchant ? singleResult.merchant.name : '未知' }}</el-descriptions-item>
            </el-descriptions>

            <div v-if="singleResult.can_consume" class="action-buttons">
              <el-button type="primary" @click="goToConsume">立即核销</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 批量验证 -->
      <div v-if="verifyMode === 'batch'" class="verify-content">
        <el-form :model="batchForm" ref="batchForm" :rules="batchRules" label-width="120px">
          <el-form-item label="商户" prop="merchant_id">
            <el-select
              v-model="batchForm.merchant_id"
              placeholder="请选择商户"
              style="width: 300px;"
              filterable
              :loading="merchantLoading"
            >
              <el-option
                v-for="merchant in merchantList"
                :key="merchant.id"
                :label="merchant.merchant_name"
                :value="merchant.id"
              >
                <span style="float: left">{{ merchant.merchant_name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ merchant.contacts }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优惠券代码" prop="coupon_codes">
            <el-input
              type="textarea"
              v-model="batchForm.coupon_codes_text"
              :rows="6"
              placeholder="请输入优惠券代码，每行一个，最多50个"
              style="width: 500px;"
            ></el-input>
            <div class="help-text">
              每行输入一个优惠券代码，最多支持50个
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="verifyBatch" :loading="batchLoading">批量验证</el-button>
            <el-button @click="clearBatch">清空</el-button>
          </el-form-item>
        </el-form>

        <!-- 批量验证结果 -->
        <div v-if="batchResults.length > 0" class="result-section">
          <h3>批量验证结果</h3>
          <div class="batch-summary">
            <el-tag type="success">有效：{{ validCount }}</el-tag>
            <el-tag type="danger">无效：{{ invalidCount }}</el-tag>
            <el-tag type="info">总计：{{ batchResults.length }}</el-tag>
          </div>

          <el-table :data="batchResults" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="coupon_code" label="优惠券代码" width="180"></el-table-column>
            <el-table-column prop="message" label="验证结果" width="200"></el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.can_consume ? 'success' : 'danger'">
                  {{ scope.row.can_consume ? '可核销' : '不可用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="coupon.coupon_name" label="优惠券名称"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button 
                  v-if="scope.row.can_consume" 
                  type="text" 
                  @click="goToConsumeWithCode(scope.row.coupon_code)"
                >
                  立即核销
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 扫码验证 -->
      <div v-if="verifyMode === 'scan'" class="verify-content">
        <div class="scan-section">
          <div v-if="!showScanner" class="scan-placeholder">
            <i class="el-icon-camera scan-icon"></i>
            <p>点击按钮开启摄像头扫描优惠券二维码</p>
            <el-button type="primary" @click="startScan">开始扫码</el-button>
          </div>

          <div v-if="showScanner" class="scanner-container">
            <div class="scanner-wrapper">
              <video id="scanner" style="width: 300px; height: 300px; border-radius: 8px;"></video>
              <div class="scanner-overlay">
                <div class="scan-frame"></div>
              </div>
            </div>
            <div class="scanner-controls">
              <el-button @click="stopScan">停止扫码</el-button>
              <el-button type="primary" @click="switchCamera" v-if="cameras.length > 1">切换摄像头</el-button>
            </div>
            <p class="scanner-tip">请将二维码对准扫描框</p>
          </div>

          <!-- 手动输入选项 -->
          <div class="manual-input">
            <el-divider>或手动输入</el-divider>
            <el-form :model="scanForm" :rules="singleRules" ref="scanForm" :inline="true">
              <el-form-item prop="coupon_code">
                <el-input 
                  v-model="scanForm.coupon_code" 
                  placeholder="优惠券代码"
                  style="width: 200px;"
                ></el-input>
              </el-form-item>
              <el-form-item prop="merchant_id">
                <el-select
                  v-model="scanForm.merchant_id"
                  placeholder="请选择商户"
                  style="width: 200px;"
                  filterable
                  :loading="merchantLoading"
                >
                  <el-option
                    v-for="merchant in merchantList"
                    :key="merchant.id"
                    :label="merchant.merchant_name"
                    :value="merchant.id"
                  >
                    <span style="float: left">{{ merchant.merchant_name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ merchant.contacts }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="verifyScan" :loading="scanLoading">验证</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 扫码验证结果 -->
          <div v-if="scanResult" class="result-section">
            <h3>扫码验证结果</h3>
            <el-alert
              :title="scanResult.message"
              :type="scanResult.can_consume ? 'success' : 'error'"
              show-icon
              :closable="false"
            />
            
            <div v-if="scanResult.coupon" class="coupon-detail">
              <h4>优惠券详情</h4>
              <el-descriptions border :column="2">
                <el-descriptions-item label="优惠券代码">{{ scanResult.coupon.coupon_code }}</el-descriptions-item>
                <el-descriptions-item label="优惠券名称">{{ scanResult.coupon.coupon_name }}</el-descriptions-item>
                <el-descriptions-item label="描述">{{ scanResult.coupon.description }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                  <el-tag :type="scanResult.coupon.is_consumed ? 'danger' : 'success'">
                    {{ scanResult.coupon.is_consumed ? '已消费' : '可使用' }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>

              <div v-if="scanResult.can_consume" class="action-buttons">
                <el-button type="primary" @click="goToConsumeWithCode(scanResult.coupon.coupon_code)">立即核销</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 二维码显示对话框 -->
    <el-dialog
      title="优惠券二维码"
      :visible.sync="qrDialogVisible"
      width="400px"
      center>
      <div class="qr-display-container">
        <div class="qr-image-section" v-if="qrCodeUrl">
          <img :src="qrCodeUrl" alt="优惠券二维码" class="qr-code-image" />
        </div>
        
        <div class="qr-info">
          <p><strong>优惠券代码：</strong>{{ singleForm.coupon_code }}</p>
          <p><strong>商户ID：</strong>{{ singleForm.merchant_id }}</p>
          <p class="qr-tip">请使用移动端扫描此二维码进行核销</p>
        </div>
        
        <div class="qr-actions">
          <el-button @click="downloadQrCode" type="primary">下载二维码</el-button>
          <el-button @click="qrDialogVisible = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QrScanner from 'qr-scanner'
import {
  verifyCoupon as apiVerifyCoupon,
  batchVerifyCoupons,
  generateCouponQrCode,
  getMerchantList
} from '@/api/nfc'

export default {
  name: 'CouponVerify',
  data() {
    return {
      verifyMode: 'single', // single, batch, scan

      // 商户列表
      merchantList: [],
      merchantLoading: false,

      // 单个验证
      singleForm: {
        coupon_code: '',
        merchant_id: ''
      },
      singleResult: null,
      singleLoading: false,

      // 批量验证
      batchForm: {
        merchant_id: '',
        coupon_codes_text: ''
      },
      batchResults: [],
      batchLoading: false,

      // 扫码验证
      scanForm: {
        coupon_code: '',
        merchant_id: ''
      },
      scanResult: null,
      scanLoading: false,
      showScanner: false,
      scanner: null,
      cameras: [],
      currentCamera: 0,
      
      // 验证规则
      singleRules: {
        coupon_code: [
          { required: true, message: '请输入优惠券代码', trigger: 'blur' },
          { max: 50, message: '优惠券代码不能超过50个字符', trigger: 'blur' }
        ],
        merchant_id: [
          { required: true, message: '请选择商户', trigger: 'change' }
        ]
      },
      batchRules: {
        merchant_id: [
          { required: true, message: '请选择商户', trigger: 'change' }
        ]
      },
      
      // 二维码生成相关
      qrLoading: false,
      qrDialogVisible: false,
      qrCodeUrl: ''
    }
  },
  computed: {
    validCount() {
      return this.batchResults.filter(item => item.can_consume).length
    },
    invalidCount() {
      return this.batchResults.filter(item => !item.can_consume).length
    }
  },
  created() {
    this.loadMerchantList()
  },
  beforeDestroy() {
    this.stopScan()
  },

  methods: {
    /**
     * 加载商户列表
     */
    async loadMerchantList() {
      this.merchantLoading = true
      try {
        const response = await getMerchantList()
        // 统一兼容：后端Admin接口 code=0 才是成功
        if (response && (response.code === 0)) {
          this.merchantList = Array.isArray(response.data) ? response.data : []
        } else {
          this.$message.error(response.message || '获取商户列表失败')
        }
      } catch (error) {
        console.error('获取商户列表失败:', error)
        this.$message.error('获取商户列表失败')
      } finally {
        this.merchantLoading = false
      }
    },

    /**
     * 重置单个验证表单
     */
    resetSingleForm() {
      this.$refs.singleForm.resetFields()
      this.singleResult = null
    },
    /**
     * 处理验证模式变化
     */
    handleModeChange(mode) {
      // 清空之前的结果
      this.singleResult = null
      this.batchResults = []
      this.scanResult = null
      
      // 清空表单验证状态
      this.$nextTick(() => {
        if (this.$refs.singleForm) {
          this.$refs.singleForm.clearValidate()
        }
        if (this.$refs.batchForm) {
          this.$refs.batchForm.clearValidate()
        }
        if (this.$refs.scanForm) {
          this.$refs.scanForm.clearValidate()
        }
      })
      
      if (mode !== 'scan') {
        this.stopScan()
      }
    },

    /**
     * 单个验证
     */
    async verifySingle() {
      if (!await this.validateForm('singleForm')) return
      
      this.singleLoading = true
      this.singleResult = null
      
      try {
        const response = await apiVerifyCoupon({
          coupon_code: this.singleForm.coupon_code,
          merchant_id: this.singleForm.merchant_id
        })
        
        this.singleResult = response.data
        this.singleResult.message = response.message
        
      } catch (error) {
        this.singleResult = {
          can_consume: false,
          message: error.response?.data?.message || '验证失败',
          coupon: null
        }
      } finally {
        this.singleLoading = false
      }
    },

    /**
     * 批量验证
     */
    async verifyBatch() {
      if (!await this.validateForm('batchForm')) return
      
      // 解析优惠券代码
      const codes = this.batchForm.coupon_codes_text
        .split('\n')
        .map(code => code.trim())
        .filter(code => code.length > 0)
        
      if (codes.length === 0) {
        this.$message.error('请输入至少一个优惠券代码')
        return
      }
      
      if (codes.length > 50) {
        this.$message.error('最多支持50个优惠券代码')
        return
      }
      
      this.batchLoading = true
      this.batchResults = []
      
      try {
        const response = await batchVerifyCoupons({
          coupon_codes: codes,
          merchant_id: this.batchForm.merchant_id
        })
        
        this.batchResults = response.data.results || []
        
        this.$message.success(`批量验证完成，共验证${this.batchResults.length}张优惠券`)
        
      } catch (error) {
        this.$message.error(error.response?.data?.message || '批量验证失败')
      } finally {
        this.batchLoading = false
      }
    },

    /**
     * 清空批量验证
     */
    clearBatch() {
      this.batchForm.coupon_codes_text = ''
      this.batchResults = []
    },

    /**
     * 开始扫码
     */
    async startScan() {
      try {
        this.showScanner = true

        // 检查是否支持摄像头
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
          this.$message.error('您的浏览器不支持摄像头功能')
          this.showScanner = false
          return
        }

        // 获取摄像头列表
        const cameras = await QrScanner.listCameras(true)
        this.cameras = cameras

        if (cameras.length === 0) {
          this.$message.error('未检测到可用的摄像头')
          this.showScanner = false
          return
        }

        // 初始化扫描器
        const videoElement = document.getElementById('scanner')
        this.scanner = new QrScanner(
          videoElement,
          result => this.handleScanResult(result),
          {
            returnDetailedScanResult: true,
            highlightScanRegion: true,
            highlightCodeOutline: true,
            preferredCamera: 'environment' // 优先使用后置摄像头
          }
        )

        await this.scanner.start()
        this.$message.success('扫码功能已启动，请将二维码对准摄像头')

      } catch (error) {
        console.error('启动扫码失败:', error)
        this.$message.error('启动摄像头失败，请检查权限设置或使用手动输入')
        this.showScanner = false
      }
    },

    /**
     * 停止扫码
     */
    stopScan() {
      if (this.scanner) {
        this.scanner.stop()
        this.scanner.destroy()
        this.scanner = null
      }
      this.showScanner = false
      this.$message.info('扫码已停止')
    },

    /**
     * 切换摄像头
     */
    async switchCamera() {
      if (this.cameras.length > 1 && this.scanner) {
        try {
          this.currentCamera = (this.currentCamera + 1) % this.cameras.length
          await this.scanner.setCamera(this.cameras[this.currentCamera].id)
          this.$message.success(`已切换到${this.cameras[this.currentCamera].label || '摄像头'}`)
        } catch (error) {
          console.error('切换摄像头失败:', error)
          this.$message.error('切换摄像头失败')
        }
      }
    },

    /**
     * 处理扫码结果
     */
    handleScanResult(result) {
      try {
        // 停止扫码
        this.stopScan()

        let couponCode = ''
        let merchantId = null

        // 获取扫码结果数据
        const scanData = result.data || result
        console.log('扫码原始数据:', scanData)

        // 尝试解析JSON格式：{"type":"coupon_consume","coupon_code":"xxx","merchant_id":123,"timestamp":xxx}
        if (scanData.startsWith('{')) {
          try {
            const data = JSON.parse(scanData)
            console.log('解析后的JSON数据:', data)
            couponCode = data.coupon_code || data.code || ''
            merchantId = data.merchant_id || null
            console.log('提取的数据 - couponCode:', couponCode, 'merchantId:', merchantId)
          } catch (parseError) {
            console.error('JSON解析失败:', parseError)
            // JSON解析失败，当作纯文本处理
            couponCode = scanData
          }
        } else {
          // 纯文本格式，直接作为优惠券代码
          couponCode = scanData
        }

        if (!couponCode) {
          this.$message.error('二维码中未找到有效的优惠券代码')
          return
        }

        // 设置优惠券代码
        this.scanForm.coupon_code = couponCode

        // 如果二维码中包含商户ID，需要在商户列表中查找对应的商户并选中
        if (merchantId) {
          // 如果商户列表还没有加载完成，等待加载
          if (this.merchantLoading || this.merchantList.length === 0) {
            console.log('商户列表还在加载中，等待加载完成...')
            this.$message.info('正在加载商户列表，请稍候...')
            
            // 等待商户列表加载完成
            const checkMerchantList = () => {
              if (!this.merchantLoading && this.merchantList.length > 0) {
                this.setMerchantFromScan(merchantId, couponCode)
              } else {
                setTimeout(checkMerchantList, 100)
              }
            }
            checkMerchantList()
            return
          }
          
          this.setMerchantFromScan(merchantId, couponCode)
        } else {
          this.$message.success(`扫码成功，获取到优惠券代码：${couponCode}`)
        }

        // 注意：自动验证逻辑已移到 setMerchantFromScan 方法中

      } catch (error) {
        console.error('处理扫码结果失败:', error)
        this.$message.error('处理扫码结果失败，请重试')
      }
    },

    /**
     * 扫码验证
     */
    async verifyScan() {
      if (!await this.validateForm('scanForm')) return
      
      this.scanLoading = true
      this.scanResult = null
      
      try {
        const response = await apiVerifyCoupon({
          coupon_code: this.scanForm.coupon_code,
          merchant_id: this.scanForm.merchant_id
        })
        
        this.scanResult = response.data
        this.scanResult.message = response.message
        
      } catch (error) {
        this.scanResult = {
          can_consume: false,
          message: error.response?.data?.message || '验证失败',
          coupon: null
        }
      } finally {
        this.scanLoading = false
      }
    },

    /**
     * 前往核销页面
     */
    goToConsume() {
      this.$router.push({
        path: '/nfc/coupon/consume',
        query: { 
          coupon_code: this.singleResult.coupon.coupon_code,
          merchant_id: this.singleForm.merchant_id
        }
      })
    },

    /**
     * 前往核销页面（带代码）
     */
    goToConsumeWithCode(couponCode) {
      this.$router.push({
        path: '/nfc/coupon/consume',
        query: { 
          coupon_code: couponCode,
          merchant_id: this.batchForm.merchant_id || this.scanForm.merchant_id
        }
      })
    },

    /**
     * 验证表单
     */
    validateForm(formName) {
      return new Promise((resolve) => {
        this.$refs[formName].validate((valid) => {
          resolve(valid)
        })
      })
    },

    /**
     * 生成二维码
     */
    async generateQrCode() {
      this.qrLoading = true
      
      try {
        const response = await generateCouponQrCode({
          coupon_code: this.singleForm.coupon_code,
          merchant_id: this.singleForm.merchant_id,
          size: 200,
          format: 'png'
        })
        
        if (response.code === 200) {
          this.qrCodeUrl = response.data.qr_code_url
          this.qrDialogVisible = true
          this.$message.success('二维码生成成功')
        } else {
          this.$message.error(response.message)
        }
        
      } catch (error) {
        this.$message.error(error.response?.data?.message || '生成二维码失败')
      } finally {
        this.qrLoading = false
      }
    },

    /**
     * 下载二维码
     */
    downloadQrCode() {
      // 实现下载二维码的逻辑
      console.log('下载二维码')
    },

    /**
     * 从扫码结果设置商户
     */
    setMerchantFromScan(merchantId, couponCode) {
      console.log('商户列表:', this.merchantList)
      console.log('原始商户ID:', merchantId, '类型:', typeof merchantId)
      
      // 尝试匹配商户（考虑数据类型转换）
      const merchant = this.merchantList.find(m => {
        return m.id === merchantId || m.id === String(merchantId) || m.id === Number(merchantId)
      })
      
      console.log('查找到的商户:', merchant)
      
      if (merchant) {
        // 使用商户列表中的实际ID值，确保数据类型一致
        this.scanForm.merchant_id = merchant.id
        console.log('设置商户ID:', merchant.id, '当前表单商户ID:', this.scanForm.merchant_id)
        this.$message.success(`扫码成功，获取到优惠券代码：${couponCode}，已自动选择商户：${merchant.merchant_name}`)
        
        // 使用 nextTick 确保DOM更新后再进行验证
        this.$nextTick(() => {
          console.log('DOM更新后的表单数据:', this.scanForm)
          if (this.scanForm.merchant_id) {
            console.log('开始自动验证')
            this.verifyScan()
          }
        })
      } else {
        // 如果找不到商户，仍然设置原始ID用于验证
        this.scanForm.merchant_id = merchantId
        console.log('未找到商户，设置原始ID:', merchantId)
        this.$message.warning(`扫码成功，获取到优惠券代码：${couponCode}，商户ID：${merchantId}（商户列表中未找到对应商户，但将继续验证）`)
        
        // 使用 nextTick 确保DOM更新后再进行验证
        this.$nextTick(() => {
          if (this.scanForm.merchant_id) {
            this.verifyScan()
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.coupon-verify {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 500;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.verify-card {
  margin-bottom: 30px;
}

.verify-content {
  margin-top: 20px;
}

.result-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
}

.result-section h3 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 500;
}

.coupon-detail {
  margin-top: 20px;
}

.coupon-detail h4 {
  margin: 20px 0 15px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
}

.help-text {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.batch-summary {
  margin-bottom: 20px;
}

.batch-summary .el-tag {
  margin-right: 10px;
}

/* 扫码相关样式 */
.scan-section {
  text-align: center;
}

.scan-placeholder {
  padding: 60px 20px;
  background: #fafafa;
  border: 2px dashed #e4e7ed;
  border-radius: 6px;
}

.scan-icon {
  font-size: 48px;
  color: #C0C4CC;
  margin-bottom: 20px;
}

.scan-placeholder p {
  margin: 20px 0;
  color: #909399;
  font-size: 14px;
}

.scanner-container {
  margin: 20px 0;
}

.scanner-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-frame {
  width: 200px;
  height: 200px;
  border: 2px solid #409EFF;
  border-radius: 8px;
  position: relative;
  background: transparent;
}

.scan-frame::before,
.scan-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #409EFF;
}

.scan-frame::before {
  top: -3px;
  left: -3px;
  border-right: none;
  border-bottom: none;
}

.scan-frame::after {
  bottom: -3px;
  right: -3px;
  border-left: none;
  border-top: none;
}

.scanner-controls {
  margin-top: 20px;
}

.scanner-controls .el-button {
  margin: 0 10px;
}

.scanner-tip {
  margin-top: 10px;
  color: #909399;
  font-size: 14px;
}

.manual-input {
  margin-top: 40px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .verify-content .el-form-item {
    margin-bottom: 20px;
  }
  
  .batch-summary .el-tag {
    margin-bottom: 10px;
  }
}

.batch-item:hover {
  background-color: #f5f7fa;
}

/* 二维码显示样式 */
.qr-display-container {
  text-align: center;
  padding: 20px;
}

.qr-image-section {
  margin-bottom: 20px;
}

.qr-code-image {
  max-width: 200px;
  height: auto;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.qr-info {
  margin-bottom: 20px;
  text-align: left;
}

.qr-info p {
  margin: 5px 0;
}

.qr-tip {
  color: #909399;
  font-style: italic;
}

.qr-actions {
  text-align: right;
}

.qr-actions .el-button {
  margin-left: 10px;
}
</style> 